<template>
  <div class="tabbar">
    <tabbar v-model="tabbarindex" >
      <tabbar-item link="/"  icon-class="navImg" >
        <img slot="icon" src="../assets/images/index_icon.png">
        <img slot="icon-active" src="../assets/images/active_index.png">
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item link="/news" >
        <img slot="icon" src="../assets/images/news.png">
        <img slot="icon-active" src="../assets/images/active_news.png">
        <span slot="label">科普</span>
      </tabbar-item>
      <tabbar-item link="/myconsult" >
        <img slot="icon" src="../assets/images/consul.png">
        <img slot="icon-active" src="../assets/images/active_consul.png">
        <span slot="label">我的咨询</span>
      </tabbar-item>
      <tabbar-item link="/my">
        <img slot="icon" src="../assets/images/my.png">
        <img slot="icon-active" src="../assets/images/active_my.png">
        <span slot="label">个人中心</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux'
export default {
  name: 'tabbarNav',
  props: {
    tabbarindex: Number
  },
  components: {
    Tabbar,
    TabbarItem
  }
}
</script>
<style lang="stylus" scoped>
  @tabbar-index 60
.weui-tabbar
  background-color #fff
.navImg
  width 20px
</style>
